前端基础（CSS）

您所在的位置：网站首页 › jsp style鼠标移动到div变色 › 前端基础（CSS）

前端基础（CSS）

2023-06-07 15:37| 来源: 网络整理| 查看: 265

目录引出CSS相关1.css写在哪里？2.css的选择器【重要】（1）标签选择器---div{}（2）id选择器----#div01{}（3）类选择器---class="div01"，.dav01{}（4）后代选择器----div p{}（5）子选择器，选中div里的input框，不包括孙子类----div>input{}（6）并集选择器----div,p,h1{}（7）伪类标签----a:hover{} 3.常用样式（1）首行缩进&+nbsp;到text-indent: 2em；（2）把a标签变成点击框的案例（3）把背景设置成一张图片body{}（4）给body加个有圆弧的虚线（5）表格的美化显示案例 Bootstrap相关1.初识Bootstrap2.导包---从html到jsp 总结

引出

css是什么，层叠样式表，

css作用：让html网页有布局，变漂亮

CSS相关

参考w3school

1.css写在哪里？

以p标签为例，

序号位置优先级1写在p标签内最高2写在style内第二3写在link内最低 DOCTYPE html> Title p{color: yellow} 一个段落 p标签

在这里插入图片描述

2.css的选择器【重要】（1）标签选择器—div{}

标签选择器，选择html文档中所有的div，对所有的div进行设置

DOCTYPE html> Title /**/ div{ width: 200px; height: 20px; background-color: darkred; } 我是一个div 我是一个标题我是第二个div

在这里插入图片描述

（2）id选择器----#div01{}

符号 # 表示 id选择器，id是不允许重复的，id是唯一的标识

DOCTYPE html> Title #div01{ width: 200px; height: 200px; background-color: darkred; } #div02{ width: 200px; height: 200px; background-color: cornflowerblue; } 我是一个div 我是第二个div 我是第二个div

在这里插入图片描述

（3）类选择器—class=“div01”，.dav01{} DOCTYPE html> Title .div01{ width: 200px; height: 20px; background-color: cornflowerblue; } .div02{ width: 200px; height: 20px; background-color: yellow; border: 10px solid rgba(0, 255, 204, 0.77); } 这是一个段落第一类1 第一类2 第三类1 第三类2

在这里插入图片描述

（4）后代选择器----div p{}

选中div内部的p设置样式：

DOCTYPE html> Title /*选中div里面所有的p标签*/ div p{ height: 50px; width: 200px; background-color: cornflowerblue; } div input{ height: 20px; background-color: azure; }

在这里插入图片描述

（5）子选择器，选中div里的input框，不包括孙子类----div>input{}

如果只想给div里面的input框设置样式，不想给里面的里面设置样式

DOCTYPE html> Title /*选中div里面所有input框，但不包括孙子类*/ div > input{ height: 20px; background-color: azure; }

在这里插入图片描述

（6）并集选择器----div,p,h1{}

一次选择多个

DOCTYPE html> Title div,p,h1{ background-color: deepskyblue; width: 300px; height: 50px; } p标签 h1标签（7）伪类标签----a:hover{} link：初始化的状态visited：被访问过的状态active：正在访问状态hover：鼠标悬浮状态 DOCTYPE html> 注册页面 a:link { color: #0033ff; text-decoration: none; } a:visited { color: yellow; } a:hover { text-decoration: none; color: green; } a:active { color: aqua; } 去百度

案例2：图片跳动一下，表格鼠标放上去高亮

DOCTYPE html> 鼠标移上变化 /*鼠标初始化状态*/ a:link{ /*background-color: rosybrown;*/ text-decoration: none; } /*鼠标移上去变色*/ a:hover{ color: red; text-decoration: rgba(0, 0, 255, 0.7); } a:active{ color: aqua; } /*鼠标以上去变大*/ #imgTree:hover{ width: 120px; } tr:hover{ color: yellow; background-color: darkred} 百度 id 名字价格 1 vivo 100 2 哈哈哈 200

在这里插入图片描述

3.常用样式（1）首行缩进&+nbsp;到text-indent: 2em； DOCTYPE html> Title span{ font-size: 50px; font-family: 微软雅黑; font-weight: 700; font-style: oblique; } p{ /*默认字体带下是16，空两个就是32*/ /* ; */ text-indent: 32px; /* 2em 可以解决字体大小的问题*/ text-indent: 2em; } ;;;我的饿啦啦啦姐大富科技阿卡丽的减法卡克摄图网是一家专注于正版摄影高清图片素材免费下载的图库作品网站,提供手绘插画,海报,ppt模板,科技,城市,商务,建筑,风景,美食,家居,外景,背景等好看的图片设计素材大全可供下载。摄图摄影师5000+入

在这里插入图片描述

（2）把a标签变成点击框的案例

在这里插入图片描述

DOCTYPE html> Title /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */ a { /* 没有下划线*/ text-decoration: none; width: 100px; height: 50px; background-color: red; /* 默认不可设置宽高，加了这个 a标签的显示宽高*/ display: inline-block; /* 字的颜色*/ color: #fff; text-align: center; line-height: 50px; } a:hover { /* 鼠标过来黄色*/ background-color: orange; } 百度必应（3）把背景设置成一张图片body{} /*设置背景颜色*/ body{ background-image: url("../img/paper.jpg"); }

在这里插入图片描述

完整代码：

DOCTYPE html> Title /*设置背景颜色*/ body{ background-image: url("../img/paper.jpg"); } hello 浅色背景（4）给body加个有圆弧的虚线

在这里插入图片描述

DOCTYPE html> Title body{ width: 300px; height: 100px; border: 1px dashed blue; border-radius: 10px; } 我是标题（5）表格的美化显示案例

在这里插入图片描述

DOCTYPE html> Title table { /*两个边框合并到一个里面*/ border-collapse: collapse; width: 100%; } th,td{ /*内边距*/ padding: 8px; text-align: left; border: 1px solid #ddd; } tr:hover{background-color: #f5f5f5;} 可悬停表格将鼠标移到表格行上可以查看效果。 Firstname Lastname Savings Bill Gates $100 Steve Jobs $150 Elon Musk $300 Mark Zuckerberg $250 Bootstrap相关 1.初识Bootstrap

官网文档：单击访问

在这里插入图片描述

在webStorm中新建一个项目，把下载的文件解压，找到dist目录，将这个目录拷贝到项目中，并把文件夹改名为bootstrap,因为使用bootstrap需要用到jquery的js文件，所以在项目根目录下新建一个js目录，将提供的jquery-3.4.1.min.js文件，拷贝到此目录下，最终的目录结构如下:

在这里插入图片描述

几个要点：

上线用min版，平时用另一版；要先导jquery包后导bootstrap包； 2.导包—从html到jsp

在jsp中：在这里插入图片描述

总结

未完待续~

【本文地址】

公司简介

联系我们